<template>
  <div class="booking-container">
    <h2>门票预定</h2>
    <form @submit.prevent="submitOrder">
        <h3>{{ tableData.dingdanName }}</h3>
        <p>预定服务：风景 按摩</p>
        <p>￥{{ tableData.totalPrice }}</p>
        <p>{{ duration }}分钟 | 全身 | 按摩推拿</p>
        <img :src="'http://localhost:6001' + tableData.imgUrl" width="300px" height="200px" style="border-radius:5%;">
      <!-- 预定日期选择 -->
      <div class="form-group">
        <label for="haveTime">到店时间:</label>
        <input type="date" id="haveTime" v-model="froms.haveTime" required>
        <span v-if="isDateInvalid" class="error-message">请选择有效的日期（不能是过去的日期）</span>
      </div>
      <!-- 提交按钮 -->
      <button type="submit" @click="tj">提交订单</button>
    </form>
    <!-- 提交成功提示 -->
    <div v-if="isOrderSubmitted" class="success-message">订单提交成功！</div>
  </div>
</template>

<script>
const  url = "http://localhost:1000/"
export default {
  data() {
    return {
      froms:{
        userId: 1,
        orderType: '休闲娱乐',
        orderStatus: '待使用',
        relatedId: 1,
        orderNo: '',
        dingdanName: '',
        totalPrice: '',
        imgUrl: 'http://localhost:6001/poth/img_17.png',
        haveTime: '',
      },
      // haveTime: '',
      duration: 60,
      tableData: [],
      isDateInvalid: false,
      isOrderSubmitted: false,
      entertainment:{},
      entertainmentId:1,
    };
  },
    methods:{
      tj() {
        this.axios.post(url + "order/addOrder", this.froms).then(res => {
          this.tableData = res.data.data;
          this.findById();
          this.$router.push({ path: "/order" })
          console.log("order 响应数据:",this.tableData);
        }).catch(error => {
          console.error("订单提交失败:", error);
        });
      },
      findById() {
        this.axios.get(url + "entertainment/findById?entertainmentId="+this.entertainmentId).then(res => {
          this.tableData = res.data.data;
          this.froms.totalPrice=this.tableData.totalPrice;
          this.froms.dingdanName=this.tableData.dingdanName;
          console.log("=========="+this.froms)
          console.log("findById 响应数据:", this.tableData);
        }).catch(error => {
          console.error("查询失败:", error);
        });
      },
      submitOrder() {
        const selectedDate = new Date(this.haveTime);
        const currentDate = new Date();
        // 清除时间部分，只比较日期
        selectedDate.setHours(0, 0, 0, 0);
        currentDate.setHours(0, 0, 0, 0);

        if (selectedDate < currentDate) {
          this.isDateInvalid = true;
          return;
        }
        this.isDateInvalid = false;

        // 模拟订单提交
        console.log('提交的订单信息：', {
          massageType: this.massageType,
          haveTime: this.haveTime,
          bookingTime: this.bookingTime
        });
        this.isOrderSubmitted = true;
        // 清空表单
        this.massageType = '泰式按摩';
        this.haveTime = '';
        this.bookingTime = '';
      }
    },
    created() {
      this.findById();
    }
}
</script>

<style scoped>
.booking-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f9f9f9;
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
}

select,
input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

button {
  display: block;
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

.error-message {
  color: red;
  font-size: 12px;
  margin-top: 5px;
}

.success-message {
  color: green;
  margin-top: 15px;
}
</style>